<template>
	<view>
		<!-- 头部背景图 -->
		<view class="heightCalc">
			<view class="header"></view>
			<view class="teamMan" v-for="team in teamList" :key="team.id">
				<view style="display: flex;">
					<image class="portraitImg" mode="aspectFit" :src="team.img_url"></image>
					<view class="name">{{team.name}}</view>
				</view>
				<view class="time">{{team.created_at}}</view>
			</view> 
			<view style="text-align: center;margin-top: 30px;color: #B5B5B5;">——————没有更多成员了哦——————</view>
		</view> 

		<!-- 邀请新成员 -->
		<!-- <view style="width: 100%;height: 130rpx;position: absolute;padding-top: 20rpx;bottom: 0px;background-color: #FFFFFF;">
			<button style="width: 50%;background-color: #0CC260;color: #FFFFFF;">邀请新成员</button>
		</view> -->
	</view>
</template>

<script>
	export default { 
		data() {
			return {
				teamList:[]
			}
		},
		onLoad() {
			this.getUserTeamsList()
		},
		methods: {
			getUserTeamsList(){
				let params = {
					user_token : wx.getStorageSync("userToken")
				}
				this.$api.getUserTeamsList(params,this.$baseUrl).then(res=>{
					console.log(res)
					if(res.data.level = "success"){
						this.teamList = res.data.data
					}else{
						wx.showToast({
							title:res.data.message,
							icon:"none"
						})
					}
				})
			}
		}
	}
</script>

<style scoped>
	.heightCalc{
		/* height: calc(100vh - 150rpx); */
		height: 100vh;
		overflow: auto;
		overflow-x: hidden;
	}
	.header {
		height: 300px;
		background-image: url(https://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/yaojike2020/cloudMedicine/backgroundImg/teamBackground.png);
		background-size: 100% auto;
		background-repeat: no-repeat;
		position: relative;
		/* top: -85px; */
		margin: 0 -50px;
		margin-top: -85px;
	}

	.teamMan {
		margin: 30rpx;
		display: flex;
		justify-content: space-between;
		height: 100rpx;
		line-height: 100rpx;
		border-bottom: 1rpx solid #e6e6e6;
		padding-bottom: 30rpx;
	}

	.portraitImg {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		vertical-align: middle;
		margin-right: 20rpx;
	}

	.name {
		font-size: 32rpx;
	}

	.time {
		font-size: 30rpx;
		color: #8a8989;
	}
</style>
